iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
Modern Web

三十天路邊賭場上線了!系列 第 25

DAY25 串接開牌動畫

  • 分享至 

  • xImage
  •  

前言

今天來串接開牌動畫吧!前後端的互相推卸責任下,遊戲的開牌動畫我以為全部交給前端控制就好,結果好像有滿滿的問題...

指令

當收到 cst.TB_NTF_PI_RESULT 指令時,就會開始開牌動作,也就是說如果半途中加入遊戲,是看不到開牌動做的,這部分如果要調教的完美無缺,要動非常多力,而且真的一開始我沒考量到,所以...就將就吧哈哈

開牌方法

大概解說一下,我們收到開牌結果其實是直接收到結果,並沒有一張一張收到,也就是說我們必須自己慢慢顯示,大致上就是透過while判斷是否還有牌要開,把牌開完。8秒之後還要把牌都清掉,等待下一局的牌。

public async piResult(poker_result: any) {
    let pokerPlayer = poker_result.player.slice()
    let pokerBanker = poker_result.banker.slice()

    setTimeout(() => {
      this._pokersPlayer.reset()
      this._pokersBanker.reset()
    }, 8000)
   
    while (pokerPlayer.length || pokerBanker.length) {
      if (pokerPlayer.length) {
        let _player = pokerPlayer.splice(0, 1)[0]
        this._pokersPlayer.sendPoker(_player.type, _player.symbol)
        await delay(1200)
      }
      if (pokerBanker.length) {
        let _banker = pokerBanker.splice(0, 1)[0]
        this._pokersBanker.sendPoker(_banker.type, _banker.symbol)
        await delay(1200)
      }
    }
  }

撲克牌重置

這是重置我們的鋪克牌,不包含輸贏結果的動畫。

  public reset() {
    this._pokerList.map(e => {
      e.removeChildren()
    })
    this._pokerList = []
    this._pokerWin.removeChildren()
    this._pokerPoint.removeChildren()
  }

Delay

這是一個delay的function,可以幫你延後執行,就是透過await

/**
 * 延遲
 * @param {*} time 延遲秒數
 */
var delay = function (time: number) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  })
}

預覽

https://ithelp.ithome.com.tw/upload/images/20190926/20109783fD0WoUep9T.png

後記

大概就是預覽這樣,明天應該就可以放到Heroku了!
我已經有預感會有一些動畫很詭異的時間點。


上一篇
DAY24 串接下注狀態、籌碼下注限制
下一篇
DAY26 串接牌局結果、勝利區塊
系列文
三十天路邊賭場上線了!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言